<template>
  <div>
    <!-- 头部 -->
    <Header></Header>
    <main-container>
      <div class="article-add-box container">
        <div>
          <h1>博客新增</h1>
        </div>

        <!-- 文章编辑区域 -->
        <div>
          <el-form
              :model="articleForm"
              label-width="120px"
              :rules="articleFormRules"
              ref="articleFormRef"
          >
            <el-form-item label="类型:" prop="articleType">
              <el-select clearable v-model="articleForm.articleType">
                <el-option
                    v-for="(item,index) in articleTypeOptions"
                    :key="'article_type_'+index"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="标签:" prop="articleTagList">
              <el-tag
                  v-for="tag in articleForm.articleTagList"
                  :key="tag"
                  closable
                  class="article-add-tag"
                  size="large"
                  :disable-transitions="false"
                  @close="handleCloseArticleTag(tag)"
              >
                {{ tag }}
              </el-tag>
              <el-input
                  maxlength="10"
                  class="article-add-tag-input"
                  v-if="articleTagInputVisible"
                  ref="articleTagInputRef"
                  v-model="articleTagInputValue"
                  show-word-limit
                  @keyup.enter="handleArticleTagInputConfirm"
                  @blur="handleArticleTagInputConfirm"
              />
              <el-button v-else  @click="showArticleTagInput">
                新增标签
              </el-button>
            </el-form-item>
            <el-form-item label="文章标题:" prop="title">
              <el-input
                  class="article-add-input"
                  maxlength="25"
                  v-model="articleForm.title"
                  show-word-limit
                  placeholder="请输入文章标题"
              />
            </el-form-item>
            <el-form-item label="文章简介:" prop="brief">
              <el-input
                  class="article-add-input"
                  maxlength="50"
                  v-model="articleForm.brief"
                  type="textarea"
                  show-word-limit
                  placeholder="请输入文章简介"
              />
            </el-form-item>
            <el-form-item label="主图:" prop="articleImgUrl">
              <el-upload
                  accept="image/png,image/jpeg,image/gif"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="handleUploadSuccess"
                  class="upload-article-box"
              >
                <img
                    v-if="articleForm.articleImgUrl"
                    :src="articleForm.articleImgUrl"
                    style="width: 100%;height:100%"
                    alt="文章主图"/>
                <el-icon v-else><Plus /></el-icon>
              </el-upload>
            </el-form-item>

            <el-form-item label="主要内容:" prop="contentHtml">
              <div style="width: 800px">
                <my-wang-editor
                    :height="500"
                    ref="myWangEditorRef"
                    @changContentHtml="changContentHtml">
                </my-wang-editor>
              </div>
            </el-form-item>
          </el-form>

          <div class="article-add-bottom-button-box">
            <el-button type="info" @click="cancelInput">清空富文本</el-button>
            <el-button type="primary" @click="clickSubmitArticle">提交</el-button>
          </div>
        </div>
      </div>
    </main-container>


  </div>
</template>

<script setup>
import { nextTick,ref,inject} from "vue";
import { ElMessage,ElInput } from 'element-plus';
import { addArticleApi } from "@/api/article";
import {
  Plus,
} from '@element-plus/icons-vue';
import MyWangEditor from "@/components/WangEditor/MyWangEditor";
import {useRouter} from "vue-router";
import store from "@/store";

const router = useRouter();
// 文章标签输入框的值
const articleTagInputValue = ref('');
// 文章标签输入框
const articleTagInputVisible = ref(false);
const articleTagInputRef = ref();
// 编辑器
const myWangEditorRef = ref(null);
// 刷新页面
const reload = inject('reload');
// 上传路径
const uploadUrl = process.env.VUE_APP_BASE_API + '/upload/upload';

// 文章表单
const articleForm = ref({
  // 文章类型
  articleType:1,
  // 文章标签
  articleTagList:[],
  // 文章标题
  title:'',
  // 主图
  articleImgUrl:'',
  // 核心内容
  contentHtml:'',
});
// 验证所要
let articleFormRef = ref(null);
// 文章表单验证规则
let articleFormRules = {
  articleType:[
    {required: true, message: '请选择文章类型', trigger: 'change'}
  ],
  articleTagList:[
    {required: true, message: '请至少输入一个文章标签', trigger: 'change'}
  ],
  title:[
    {required: true, message: '请输入文章标题', trigger: 'blur'}
  ],
  brief:[
    {required: true, message: '请输入文章简介', trigger: 'blur'}
  ],
  articleImgUrl:[
    {required: true, message: '请上传文章主图', trigger: 'change'}
  ],
  contentHtml:[
    {required: true, message: '请输入文章主要内容', trigger: 'change'}
  ]
}

// 文章类型
let articleTypeOptions = ref([
  {
    label:'前端',
    value:1,
  },
  {
    label:'后端',
    value:2,
  },
  {
    label:'数据库',
    value:3,
  },
  {
    label:'其他',
    value:4,
  }
]);


/** 点击提交文章 */
function clickSubmitArticle(){
  articleFormRef.value.validate((valid, fields) => {
    if (valid) {
      addArticleApi(articleForm.value).then(async () => {
        ElMessage({
          message: '新增成功',
          type: 'success',
        });
        await store.dispatch('updateStationInfo');
        await router.push("/");
      })
    }
  })
}

// 富文本内容改变时
function changContentHtml(contentHtml){
  articleForm.value.contentHtml = contentHtml;
}

// 取消输入
function cancelInput(){
  console.log(myWangEditorRef.value)
  if(myWangEditorRef.value){
    myWangEditorRef.value.clearHtml();
  }
}

/** 关闭标签 */
function handleCloseArticleTag(tag){
  // 删除标签
  articleForm.value.articleTagList.splice(articleForm.value.articleTagList.indexOf(tag), 1)
}

/** 标签提交 */
function handleArticleTagInputConfirm(){
  // 如果输入框有值
  if (articleTagInputValue.value) {
    articleForm.value.articleTagList.push(articleTagInputValue.value);
  }
  // 重置到最新
  articleTagInputVisible.value = false
  articleTagInputValue.value = ''
}

/** 展示文章标签输入框 */
function showArticleTagInput(){
  articleTagInputVisible.value = true
  nextTick(() => {
    articleTagInputRef.value.focus();
  })
}

/** 文章上传成功 */
function handleUploadSuccess(res,uploadFile){
  if(res.code === 200){
    articleForm.value.articleImgUrl = res.data.prefixFileName;
  }
}

</script>

<style scoped>
@import "../assets/css/articleAdd.css";

:deep(.el-upload){
  width: 100%;
  height: 100%;
}
</style>
